<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<user :col="gridColumns" :data='users'></user>
		</div>
		<template id='grid-template'>
			<table border="1" cellspacing="1" cellpadding="3">
				<tr >
					<th v-for="item in col">{{item}}</th>
				</tr>
				<tr v-for="user in data">
					<td v-for="item in col">{{user[item]}}</td>
				</tr>
			</table>
		</template>
	</body>
</html>
<script type="text/javascript">
	Vue.component('user',{
		template:'#grid-template',
		props:['col','data']
	})

	new Vue({
		el:'#app',
		data:{
			gridColumns:['id','name','age'],
			users:[
				{id:1,name:'张三',age:15},
				{id:2,name:'张四',age:17},
				{id:3,name:'张五',age:13},
				{id:4,name:'张六',age:25},

			]
		}
	})
</script>
